<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  mounted() {
    document.title = this.global.appName
    this.resizeHandler()
  }, 
  methods: {
    setDevice() {
      const clientWidth = document.body.clientWidth
      this.$store.commit('SET_DEVICE_WIDTH', clientWidth)
      if (clientWidth - 0 >= 992) {
        this.$store.commit('SET_DEVICE', 'desktop')
      } else if (clientWidth - 0 < 992 && clientWidth - 0 >= 768) {
        this.$store.commit('SET_DEVICE', 'ipad')
      } else if (clientWidth - 0 < 768) {
        this.$store.commit('SET_DEVICE', 'mobile')
      }
    },
    resizeHandler() {
      if (!document.hidden) {
        this.setDevice()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#app {
  ::v-deep .el-backtop {
    width: 75px;
    height: 75px;
    background: none;
    box-shadow: none;
  }
  .back-top {
    width: 75px;
    height: 75px;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
}
</style>
